<template>
  <el-dialog v-model="dialogVisible" title="新增改造项目" width="50%" @close="onClose">
    <el-form ref="formRef" v-loading="formLoading" :model="form" :rules="rules">
      <el-card class="mt-1">
        <div class="mt-5">
          <el-row :gutter="15">
            <el-col :span="10">
              <el-form-item label="改造项目" prop="category">
                <el-cascader
                  v-model="form.category"
                  class="w-100"
                  :options="categoryOptions"
                  placeholder="改造项目"
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="物品/材料明细" prop="goods_detail">
                <el-input v-model="form.goods_detail" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="15">
            <el-col :span="10">
              <el-form-item label="改造金额" prop="money">
                <el-input v-model="form.money" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="通过检查金额" prop="check_money">
                <el-input v-model="form.check_money" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirmClick">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { RevampFormItem, revampFormRules } from "./revamp-core";
import RevampAPI from "@/api/revamp";

defineOptions({
  name: "UserRevampFormItemDialog",
});

const formLoading = ref(false);
const formRef = ref();
const categoryOptions = ref<OptionType[]>([]);
const dialogVisible = ref(false);
const rules = ref(revampFormRules);
const form = ref<RevampFormItem>({});

onMounted(() => {
  // 获取改造项目分类
  RevampAPI.getRevampCategoryOptions().then((options) => {
    categoryOptions.value = options;
  });
});

/**
 * @description 确定按钮点击事件
 */
async function onConfirmClick() {
  try {
    await formRef.value.validate((valid: boolean) => {
      if (valid) {
        RevampAPI.editRevamp(form.value).then(() => {
          ElMessage.success("操作成功");
          dialogVisible.value = false;
        });
      } else {
        return false;
      }
    });
  } catch (error) {
    console.error("验证过程中发生错误", error);
  }
}

const onClose = () => {
  dialogVisible.value = false;
  form.value = RevampFormItem.empty();
};

/**
 * @description 打开弹窗
 * @param id   ID
 * @returns
 */
const open = (id: number) => {
  form.value.id = id;
  dialogVisible.value = true;
  fetchData();
};

/**
 * @description 获取数据
 */
const fetchData = () => {
  if (!form.value.id) return;
  formLoading.value = true;
  RevampAPI.getDetail(form.value.id)
    .then((res) => {
      form.value = res;
    })
    .finally(() => {
      formLoading.value = false;
    });
};

// 导出组件实例类型
export interface UserRevampFormItemDialogInstance {
  /** 打开弹窗 */
  open(userId: number): () => void;
}

defineExpose({
  open,
});
</script>
